wrapflex

, Android Browser, older WebKit browsers. */display:-moz-box; /*old version syntax: Firefox (buggy)*/display:-ms-flexbox; /*mixed version syntax: IE ten*/display:-webkit-flex; /*new version syntax: Chrome 21+*/Display:flex; /*new version syntax: Opera 12.1, Firefox 22+*/A flexbox layout consists of a telescopic container (Flex container) and a scaling project (flex items) that all of the child elements in the telescopic container become scaling items.A good parent container box is defined as a t

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.elements that use flex layouts , called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or " project " for short.First, the container's propertiesFlex-directionFlex-direction:row | Row-reverse | Column | Column-reverse;row (default): The spindle is horizontal and the sta

properties of the child elements are invalidated.2.0 Basic ConceptsElements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.Flex layouts:The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main

One, you can use Flex to layout a div inside another div horizontally vertically centered such as: HTML code: CSS code: . container{ width:600px; height:400px; BORDER:1PX solid blue; Display:flex; Justify-content:center; Align-items:center } . box{ width:200px; height:100px; BORDER:1PX Red Solid; PS: This can be horizontally vertically centered slightly Second, the properties of Flex There are six properties that can be written on items: fle

side axis direction (the alignment of the subelements in each line)syntax: align-items:flex-start | Flex-end | Center | Baseline | Stretchbaseline: Aligns to the base of the first line of text.stretch: Default value, if the container item is not set to a height, the stretch is used, and all items are the same as the highest. If the item has a height, it is displayed as Flex-start.Flex-wrapFlex-wrap Property: Defines whether line wrapping is allowedsy

. box{Display:flex;}. box {Display:inline-flex;}. box {Display:-webkit-flex;Display:flex;}Flex-directionFlex-wrapFlex-flowJustify-contentAlign-itemsAlign-content Property name Row Row-reverse Column Column-reverse Flex-direction The spindle is in the horizontal direction and the starting point is left(default value) Spindle is horizontal, starting point at right end Colum, the spindle i

project is arranged by default along the spindle. The main spindle space occupied by a main size single item is called the occupied cross cross size -axis space.Third, the container properties The following 6 properties are set on a container.Flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content3.1 Flex-direction Propertiesflex-directionProperties determine the direction of the spindle (that is, the direction in which the

I often used flex layout before, but recently I saw someone else using it, I found that I still did not understand this, and re-read the http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html.I. What is the flex layout? Flex, short for flexible box, is used to provide great flexibility for the box model. All containers can be specified as flex la S. .box{ display: flex;} The Row Element can also be .box{ display:inline- flex;} For a WebKit kernel browser, add-webkitPrefix .box{ display: -we

Chrome and safari support, And you need to add the WebKit prefix)-webkit-margin-before-webkit-margin-after"Contour Outline"(ie7- not supported) Outlineoutline-widthoutline-coloroutline-style (ie not supported) outline- Offset"Box-sizing"[note] Only Firefox supports Padding-box property values(ie7- not supported) box-sizingLayout class Properties"Display"Note Ie7-Browser does not support table class property values(Fully compatible)DisplayFloating(fully compatible) float ClearPositioningNote ie6